<template>
  <div class="space-y-6">
    <!-- 作者信息 -->
    <div class="bg-dark-light rounded-xl p-6 border border-gray-custom">
      <div class="flex flex-col items-center text-center">
        <div class="w-24 h-24 rounded-full overflow-hidden border-4 border-primary/50 mb-4">
          <img :src="pictureUrl" alt="科技创客" class="w-full h-full object-cover">
        </div>
        <h3 class="text-xl font-bold text-white mb-2">科技创客</h3>
        <p class="text-gray-400 mb-4">科技爱好者 · 创客</p>
        <p class="text-gray-400 text-sm mb-6">热衷于3D打印、电子DIY和软件开发，分享技术与创意。</p>
        <div class="flex space-x-3">
          <a href="#"
            class="w-9 h-9 rounded-full bg-gray-custom/30 hover:bg-primary flex items-center justify-center transition-colors"
            aria-label="GitHub">
            <i class="fa fa-github text-white"></i>
          </a>
          <a href="#"
            class="w-9 h-9 rounded-full bg-gray-custom/30 hover:bg-primary flex items-center justify-center transition-colors"
            aria-label="Twitter">
            <i class="fa fa-twitter text-white"></i>
          </a>
          <a href="#"
            class="w-9 h-9 rounded-full bg-gray-custom/30 hover:bg-primary flex items-center justify-center transition-colors"
            aria-label="YouTube">
            <i class="fa fa-youtube-play text-white"></i>
          </a>
          <a href="#"
            class="w-9 h-9 rounded-full bg-gray-custom/30 hover:bg-primary flex items-center justify-center transition-colors"
            aria-label="Instagram">
            <i class="fa fa-instagram text-white"></i>
          </a>
        </div>
      </div>
    </div>

    <!-- 搜索框 -->
    <div class="bg-dark-light rounded-xl p-6 border border-gray-custom">
      <h3 class="text-lg font-semibold text-white mb-4">搜索文章</h3>
      <div class="relative">
        <input type="text" placeholder="输入关键词搜索..."
          class="w-full bg-gray-custom/30 border border-gray-custom rounded-lg px-4 py-2 pl-10 text-sm focus:outline-none focus:ring-2 focus:ring-primary/50">
        <i class="fa fa-search absolute left-3 top-3 text-gray-400"></i>
      </div>
    </div>

    <!-- 分类统计 -->
    <div class="bg-dark-light rounded-xl p-6 border border-gray-custom">
      <h3 class="text-lg font-semibold text-white mb-4">分类统计</h3>
      <div class="h-64">
        <canvas id="categoryChart"></canvas>
      </div>
    </div>

    <!-- 标签云 -->
    <div class="bg-dark-light rounded-xl p-6 border border-gray-custom">
      <h3 class="text-lg font-semibold text-white mb-4">标签云</h3>
      <div class="flex flex-wrap gap-2">
        <template v-for="tag in tags" :key="tag.name">
          <a href="#"
            class="bg-gray-custom/30 hover:bg-primary/80 text-gray-300 hover:text-white px-3 py-1 rounded-full text-sm transition-colors"
            :style="{ fontSize: (12 + (tag.count / maxTagCount) * 8) + 'px' }">
            {{ tag.name }}
          </a>
        </template>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import categories from '@/data/categories';
import tags from '@/data/tags';
// 正确导入Chart.js
import Chart from 'chart.js/auto';

// 导入通用图片路径
import { pictureUrl } from '@/assets/image';

const maxTagCount = ref(0);
let categoryChart = null; // 存储图表实例

onMounted(() => {
  // 计算最大标签数量用于动态调整字体大小
  maxTagCount.value = Math.max(...tags.map(tag => tag.count));

  // 初始化分类统计图表
  initCategoryChart();
});

const initCategoryChart = () => {
  const ctx = document.getElementById('categoryChart').getContext('2d');

  // 如果已有图表实例，先销毁
  if (categoryChart) {
    categoryChart.destroy();
  }

  // 使用Chart构造函数创建图表（修复错误的核心）
  categoryChart = new Chart(ctx, {
    type: 'doughnut',
    data: {
      labels: categories.map(c => c.name),
      datasets: [{
        data: categories.map(c => c.count),
        backgroundColor: categories.map(c => c.color),
        borderWidth: 0,
        hoverOffset: 4
      }]
    },
    options: {
      responsive: true,
      maintainAspectRatio: false,
      plugins: {
        legend: {
          position: 'bottom',
          labels: {
            color: '#9ca3af',
            padding: 15,
            usePointStyle: true,
            pointStyle: 'circle'
          }
        }
      },
      cutout: '70%'
    }
  });
};
</script>
